import React from "react";
import styles from "./ProductCollection.module.css";
import { Divider } from "antd";
import { withRouter, RouteComponentProps, Link } from "react-router-dom";

interface PropsType {
  title: JSX.Element;
  sideImage: string;
  products: any[];
}

const ProductCollectionComponent: React.FC<PropsType> = ({
  title,
  products,
}) => {
  return (
    <div className={styles.content}>
      <Divider orientation="left">{title}</Divider>
      <div className={styles["hot-lists"]}>
        {products.map((item) => (
          <div className={styles["hot-lists-item"]} key={item.id}>
            <Link to={`detail/${item.id}`}>
              <img className={styles.img} alt="img" src={item?.imgs[0]?.url} />
            </Link>
            <div className={styles.title}>{item.title}</div>
            <div className={styles.info}>{item.info}</div>
            <div className={styles.price}>￥{item.price}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export const ProductCollection = withRouter(ProductCollectionComponent);
